<template>
    
    <div class="sidebar">   
        <div v-if="categorylist">
            
        <ul v-for="itemlist in categorylist">
            <li>
                <router-link class="left-div-herf" :to="{path: '/statute?category=' + itemlist.id }">{{itemlist.name}} <span class="smallBox" v-if="itemlist.childrens"></span><Icon type="ios-arrow-forward" class="ios-arrow-forward"></Icon>
                    
                    <div class="right-div" v-if="itemlist.childrens">

                        <dl v-for="(item1, index1) in itemlist.childrens.data" :key="index1">


                            <router-link  :to="{path: '/statute?category=' + item1.id}">
                                <dt  style="float: left;width: 100%;" class="dt">{{item1.name}}</dt>
                            </router-link>

                            <div v-if="item1.childrens">

                                <dl v-for="(item2, index2) in item1.childrens.data" :key="index2">

                                    <router-link  :to="{path: '/statute?category=' + item2.id}">
                                        <dd  style="font-weight:800">{{item2.name}}</dd>
                                    </router-link>

                                    <div v-if="item2.childrens">

                                        <dl  v-for="(item3, index3) in item2.childrens.data" :key="index3">
                                            <router-link  :to="{path: '/statute?category=' + item3.id}">
                                                <dd>{{item3.name}}</dd>

                                            </router-link>
                                        </dl>

                                    </div>

                                </dl>

                            </div>

                        </dl>

                    </div>
                </router-link>
            </li> 
        </ul>
        </div>
     </div>

</template>

<script>

export default {
    
    data(){

    return {

        categorylist:[],
      
    }

  },
  created() {

    this.getCarousel();

  },

  methods:{

    getCarousel(){

        this.$http.get('/category/list',{params:{include:"childrens.childrens.childrens"}}).then(res => {


            this.categorylist = res.data.data;


            }).catch(err => {

                this.$Message.error( 'category');
            
        })

    }
  }
}
</script>

<style>
@import '../assets/css/ccm.css';
    .sidebar{
        width: 220px;
        height: 400px;
        float: left;
        position: relative;
        z-index: 999;
        left: -36px;
        border: 2px solid #CD0000;
        border-top: none;
        background: #fff;
        display: none;
    }
    .sidebar li{
        list-style:none;
        text-align: center;
    }
    .sidebar li a:hover .right-div{
        display: block;
        
    }
    .sidebar li a:hover .smallBox{
        display: block;
        margin-top: -42px;
    }
</style>